<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
		<style>
			.template{
				background-color: lightgray;
				margin: 5px;
				padding: 5px;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<h1>组件</h1>
			
			<h2>例子1</h2>
			<temp1></temp1>
			
			<h2>例子2</h2>
			<temp2></temp2>
			<temp2></temp2>
			
			<h2>例子3 父组件向子组件传递数据</h2>
			<temp3 title="Hello3"></temp3>
			<temp3 title="aaaaa"></temp3>
			
			<h2>例子4 父组件向子组件传递方法，子组件间调用父组件方法</h2>
			<p>@sendfn4="show4" show4是父组件的方法 sendfn4是子组件调用父组件方式时的标识</p>
			<temp4 @sendfn4="show4" @sendfn5="show5" ></temp4>
			{{name}}
			
			<h2>例子5 ref方法</h2>
			<p>		     // this.$refs
						// 1. 访问到DOM元素
						// 2. 访问子组件的数据和方法
			</p>
			<button @click="foo5">测试</button>
			<temp5 ref="temp5"></temp5>
		</div>
		
		<!-- 定义组件的视图内容 -->
		<template id="temp2">
			<div class="template">
				<h3>组件2</h3>
				{{count}}
				<button type="button" @click="add">加</button>
			</div>
		</template>
		
		<template id="temp3">
			<div class="template">
				<h3>组件3</h3>
				{{title}}
			</div>
		</template>
		
		<template id="temp4">
			<div class="template">
				<h3>组件4</h3>
				<button @click="t_show4">按钮4</button>
				<input  type="text" v-model="name"/>
				<button @click="t_show5">按钮5</button>
			</div>
		</template>
		
		<template id="temp5">
			<div class="template">
				<h3>组件5</h3>
				{{msg}}
			</div>
		</template>
		
		<script>
			const vm = Vue.createApp({
				data() {
					return {
						msg: "Hello Vue!",
						name: "张三"
					}
				},
				methods:{
					show4()
					{
						console.log("show4()")
					},
					show5(name)
					{
						console.log("show5()")
						this.name = name;
					},
					foo5()
					{
						// this.$refs
						// 1. 访问到DOM元素
						// 2. 访问子组件的数据和方法
						this.$refs.temp5.msg = "bbb";
					}
				}
			})
			
			// 创建组件temp1
			vm.component("temp1",
			{
				data(){
					return {
						msg:"Hello,组件"
					}
				},
				template: '<h3>组件1</h3>{{msg}}'
			})
			
			// 创建组件temp2
			vm.component("temp2",
			{
				data(){
					return {
						msg:"Hello,组件",
						count:0,
					}
				},
				methods:{
					add()
					{
						this.count++;
					}
				},
				created()
				{
					console.log("temp2 created");
				},
				template: '#temp2'
			})
			
			// 创建组件temp3
			vm.component("temp3",
			{
				props: ['title'],
				data(){
					return {
						
					}
				},
				methods:{
				},
				template: '#temp3'
			})
			
			vm.component("temp4",
			{
				data(){
					return {
						name:""
					}
				},
				methods:
				{
					t_show4(){
						console.log("t_show4");
						// 调用父组件传递过来的
						// this.$emit()
						this.$emit('sendfn4');
					},
					t_show5(){
						console.log("t_show5");
						// 调用父组件传递过来的
						// this.$emit()
						this.$emit('sendfn5',this.name);
					}
				},
				template: '#temp4'
			})
			
			vm.component("temp5",
			{
				data(){
					return {
						msg:"aaa"
					}
				},
				methods:
				{
				},
				template: '#temp5'
			})
			
			vm.mount("#app");
		</script>
	</body>
</html>
